<!--物资明细-->
<template>
    <view class="body" style="width: 100%;padding:0 30rpx 30rpx;overflow: auto;position: relative;min-height: 100%;background-color: #f7f8fa">
        <u-collapse-item :open="true" v-for="(item,index) in dataList" :key="index">
            <text slot="title" class="u-page__title">子项目编码：{{item.prjCode}}</text>
            <text class="u-collapse-content">
                <view style="padding:0 18rpx 18rpx">
                    <view class="content-box" v-for="(v,i) in item.child" :key="i">
                        <view class="content-item" style="background-color:#efefef;">
                            <view class="item-label">物料编码：</view>
                            <view class="item-value">{{v.categoryCode}}</view>
                        </view>
                        <view class="content-item" >
                            <view class="item-label">物料名称：</view>
                            <view class="item-value" style="line-height: 32rpx">{{v.categoryName}}</view>
                        </view>
                        <view class="content-item" style="background-color:#efefef;">
                            <view class="item-label">主设备名称：</view>
                            <view class="item-value">{{v.spuMainName}}</view>
                        </view>
                        <view class="content-item">
                            <view class="item-label">源头赋码标识：</view>
                            <view class="item-value">{{v.ifSourceName}}</view>
                        </view>
                        <view class="content-item" style="background-color:#efefef;">
                            <view class="item-label">计量单位：</view>
                            <view class="item-value">{{v.unit}}</view>
                        </view>
                        <view class="content-item">
                            <view class="item-label">设计数量：</view>
                            <view class="item-value">{{v.eqAmount}}</view>
                        </view>
                        <view class="content-item" style="background-color:#efefef;">
                            <view class="item-label">出库单明细ID：</view>
                            <view class="item-value">{{v.osDetailId}}</view>
                        </view>
                        <view class="content-item">
                            <view class="item-label">供应商名称：</view>
                            <view class="item-value">{{v.providerName}}</view>
                        </view>
                        <view class="content-item" style="background-color:#efefef;">
                            <view class="item-label">建设子专业：</view>
                            <view class="item-value">{{v.subSpec}}</view>
                        </view>
                        <view class="content-item">
                            <view class="item-label">出库数量：</view>
                            <view class="item-value">{{v.osAmount}}</view>
                        </view>
                        <view class="content-item" style="background-color:#efefef;">
                            <view class="item-label">当前绑定数量：</view>
                            <view class="item-value">{{v.subBoundNum}}</view>
                        </view>
                    </view>
                </view>
            </text>
        </u-collapse-item>
        <view style="min-height: 1400rpx;display: flex;align-items: center;justify-content: center" v-if="dataList.length === 0">暂无数据</view>
    </view>
</template>

<script>
export default {
    components: {
    },
    props:{

    },
    data() {
        return {
            subPrjIds:[],
            dataList:[],
        }
    },
    onLoad(option) {
        console.log(111,option.subPrjIds,JSON.parse(decodeURIComponent(option.subPrjIds)))
        this.subPrjIds = JSON.parse(decodeURIComponent(option.subPrjIds))
        this.getDataList();
    },
    methods:{
        getDataList(){
            const params={
                prjCode:"",
                categoryCode:"",
                subPrjList:this.subPrjIds
            }
            this.$axios.post('/material/api/bind/product/queryProductInfoListByParam',params).then((res)=>{
                this.dataList = this.getSpanArr(res.data)
            })
        },
        getSpanArr(data) {
            const arr = []
            data.forEach((item) => {
                const index=arr.findIndex((v)=>v.prjCode === item.prjCode);
                if(index === -1){
                    arr.push({prjCode:item.prjCode,child:[item]})
                }else{
                    arr[index].child.push(item)
                }
            })
            return arr
        },
    }
}
</script>

<style>@import "@/common/common-ui.css";</style>
<style>@import "@/common/uView.css";</style>
<style scoped lang="scss">
.u-page__title{
    font-size: 32rpx;
    font-weight: 700;
    line-height: 44rpx;
}
.content-box{
    padding:20rpx;
    color: #303133;
    border: 2rpx solid #dedede;
    border-radius: 10rpx;
    margin-bottom: 15rpx;
}
.content-item{
    padding: 10rpx 15rpx;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.item-label{
    font-size: 32rpx;
    white-space: nowrap;
    margin-right: 10rpx;
}
.item-value{
    font-size: 28rpx;
    word-break: break-all;
}
</style>